.previewPanel {
	z-index: 1400;
	height: 100%;

	h1 {
		margin: 0;
	}
}

:global(#overlayPanelFullScreen) {
	position: absolute;
	right: 0;
	top: 0;
	left: 400px;
	bottom: 0;
	z-index: 1400;
	&>div {
		height: 100%;
	}
}

.topRow {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	padding: 10px;
}

.controls {
    z-index: 1300;
	justify-content: flex-end;

    button {
        cursor: pointer;
        &:hover svg {
            fill: #999999;
        }
    }
}

.previewPanelContent {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.panelContent {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.preview {
	display: flex;
    flex: 1;
    flex-direction: column;
	overflow: hidden;

    & > div, & > div > div {
        display: flex;
        flex-direction: column;
        flex: 1;
		overflow: hidden;
    }

	.loading {
		align-items: center;
		justify-content: center;
	}
}

.noResults {
    color: white;
	margin: auto;
	position: relative;
	text-align: center;
}

.previewLoading {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	justify-items: center;
	height: 100%;
}

button.error {
	border-color: #dc4040;
	color: #dc4040;

	svg {
		fill: #dc4040;
		margin-left: 4px;
		margin-top: -1px;
	}

	&:hover {
		background-color: #503636;
		border-color: #dc4040;
	}
}
